import React from 'react'
import ReactDOM from 'react-dom'

function WarningBanner(props) {
  if (!props.warn) {
    return null
  }
  return (
    <div className="warning">
      Warning
    </div>
  )
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showWarning: true };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }))
  }
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleClick}></button>
        {this.state.showWarning ? 'hide' : 'show'}
      </div>
    )
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById("root")
)